<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu">
        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item>

        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>


<!--        <el-submenu index="demo">-->
<!--          <template slot="title">-->
<!--            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span>构件流量监控模块</span>-->
<!--          </template>-->
<!--          <el-menu-item index="demo-echarts" @click="$router.push({ name: 'demo-echarts' })">-->
<!--            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">机器节点状态查询</span>-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'demo-ueditor' })">-->
<!--            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">服务调用信息</span>-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="demo-MetricRULE" @click="$router.push({ name: 'demo-MetricRULE' })">-->
<!--            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">流量控制</span>-->
<!--          </el-menu-item>-->

<!--          <el-menu-item index="demo-FallbackRULE" @click="$router.push({ name: 'demo-FallbackRULE' })">-->
<!--            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">熔断规则</span>-->
<!--          </el-menu-item>-->


<!--          <el-menu-item index="demo-HotPointRULE" @click="$router.push({ name: 'demo-HotPointRULE' })">-->
<!--            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">热点规则</span>-->
<!--          </el-menu-item>-->

<!--          <el-menu-item index="demo-SystemRULE" @click="$router.push({ name: 'demo-SystemRULE' })">-->
<!--            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">系统规则</span>-->
<!--          </el-menu-item>-->

<!--          <el-menu-item index="demo-AuthRULE" @click="$router.push({ name: 'demo-AuthRULE' })">-->
<!--            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">授权规则</span>-->
<!--          </el-menu-item>-->

<!--        </el-submenu>-->
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
import {isURL} from '@/utils/validate'

export default {
    data () {
      return {
        dynamicMenuRoutes: []
      }
    },
    components: {
      SubMenu
    },
    computed: {
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      menuList: {
        get () { return this.$store.state.common.menuList },
        set (val) { this.$store.commit('common/updateMenuList', val) }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      }
    },
    watch: {
      $route: 'routeHandle'
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      this.routeHandle(this.$route)
    },
    methods: {
      // 路由操作
      routeHandle (route) {
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
              if (!route) {
                return console.error('未能找到可用标签页!')
              }
            }
            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || '',
              params: route.params,
              query: route.query
            }
            this.mainTabs = this.mainTabs.concat(tab)
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
        }
      }
    }
  }
</script>
<style>
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu-item, .site-sidebar--dark .site-sidebar__menu.el-menu .el-submenu > .el-submenu__title, .site-sidebar--dark > .el-menu--popup .el-menu-item, .site-sidebar--dark > .el-menu--popup .el-submenu > .el-submenu__title, .site-sidebar--dark-popper .site-sidebar__menu.el-menu .el-menu-item, .site-sidebar--dark-popper .site-sidebar__menu.el-menu .el-submenu > .el-submenu__title, .site-sidebar--dark-popper > .el-menu--popup .el-menu-item, .site-sidebar--dark-popper > .el-menu--popup .el-submenu > .el-submenu__title {
  width: auto;
  color: #d9d9db;
}
.el-submenu__icon-arrow {
  top: 50%;
  margin-top: -7px;
  left: 200px;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  font-size: 12px;
}

</style>
